<template>
  <div id="top-bar">
    <div id="notice">
      <el-link style="font-size: 10px; height: 20px" type="warning">
        公告：
        {{ notice.Title }}</el-link
      >
    </div>
    <div id="btn">
      <el-button v-show="loginBtn" @click="login" type="text"
        >登录|注册</el-button
      >
      <el-divider style="height: 30px" direction="vertical"></el-divider>
      <el-button type="text" v-show="myOrder" @click="goOrder">我的订单</el-button>
      <el-divider style="height: 30px" direction="vertical"></el-divider>
        <span id="caidan" @click="goHome" class="el-dropdown-link">
          首页
        </span>
      <el-divider style="height: 30px" direction="vertical"></el-divider>
      <el-dropdown v-show="my9i" trigger="click">
        <span id="caidan" class="el-dropdown-link">
          我的就爱<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="logout" icon="el-icon-info"
            >注销</el-dropdown-item
          >
          <el-dropdown-item
            @click.native="admin"
            v-show="isAdmin"
            icon="el-icon-info"
            >管理员后台</el-dropdown-item
          >
          <el-dropdown-item
            @click.native="merchant"
            v-show="isMerchant"
            icon="el-icon-info"
            >商家后台</el-dropdown-item
          >
          <el-dropdown-item
            @click.native="supplier"
            v-show="isSupplier"
            icon="el-icon-info"
            >供应商后台</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { clearToken } from "../../../utils/auth.js";
import { isLogin } from "../../../utils/auth";
export default {
  data() {
    return {
      notice: {
        name: "公告",
        Title: "因天气影响。。。。。。。",
        content: "受天气影响导致各地区地区配送缓慢",
      },

      // 我的就爱下拉菜单展示状态
      isAdmin: false,
      isMerchant: false,
      isSupplier: false,

      myOrder:true,

      // 登录按钮和我的就爱列表暂时状态
      loginBtn: true,
      my9i: false,
    };
  },
  mounted() {
    this.isRole();
    this.isLoginStatus();
    this.pathIsOrder();
  },
  methods: {
    isLoginStatus() {
      let isAuth = isLogin();
      if (isAuth) {
        this.loginBtn = false;
        this.my9i = true;
      } else {
        this.loginBtn = true;
        this.my9i = false;
      }
    },
    pathIsOrder(){
      if(this.$route.path == '/order')
      {
        this.myOrder = false;
      }else{
        this.myOrder = true;
      }
    },
    isRole() {
      var userrole = localStorage.getItem("userRole");
      if (userrole == "管理员") {
        this.isAdmin = true;
      } else if (userrole == "商家") {
        this.isMerchant = true;
      } else if (userrole == "供应商") {
        this.isSupplier = true;
      }
    },
    // 跳转至登录页面
    goLogin() {
      this.$router.push("/login");
    },
    // 注销打开对话框
    logout() {
      this.open();
    },
    login() {
      this.$router.push({ path: "/login" });
    },
    //我的订单
    goOrder(){
      this.$router.push({path:"/order"});
    },
    //回到首页
    goHome(){
      this.$router.push({path:'/'})
    },
    
    admin() {},
    merchant() {},
    supplier() {},
    // 注销对话框方法
    open() {
      const h = this.$createElement;
      this.$msgbox({
        title: "注销",
        message: h("p", null, [
          h("span", null, "您将退出登录，是否继续 "),
          h("i", { style: "color: teal" }),
        ]),
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "正在退出登录...";
            setTimeout(() => {
              done();
              this.$router.go(0);
              clearToken();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            }, 1000);
          } else {
            done();
          }
        },
      }).then(() => {
        this.$message({
          type: "info",
          message: "已退出登录",
        });
      });
    },
  },
};
</script>

<style scoped>
#top-bar {
  color: white;
  display: flex;
  align-items: center;
  align-content: center;
  font-size: 10px;
  flex-wrap: nowrap;
  /* margin-top: 12px; */
}

/* 顶栏的公告样式 */
#notice {
  flex: 1;
  margin-right: auto;
  text-align: left;
}

/* 顶栏的按钮样式 */
#btn > * {
  color: slategrey !important;
}
#btn >>> #caidan {
  color: slategrey;
}

#btn > .el-button {
  height: 10px;
}
#btn :hover {
  color: white;
}
#btn > .el-divider--vertical {
  height: 15px;
}

/* 顶栏的下拉菜单样式 */
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
</style>